<template>
    <div v-if="visible" class="modal-overlay" @click.self="closeModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">{{ restaurant.name }}</h2>
                <button class="close-btn" @click="closeModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="modal-body">
                <!-- 封面图片 -->
                <div class="cover-image" v-if="restaurant.coverImage">
                    <img :src="restaurant.coverImage" :alt="restaurant.name" class="cover-img">
                </div>

                <div class="restaurant-details">
                    <!-- 基本信息 -->
                    <div class="detail-section">
                        <h3>店铺信息</h3>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <i class="fas fa-utensils"></i>
                                <span class="label">美食类别：</span>
                                <span>{{ restaurant.category || '暂无' }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-star"></i>
                                <span class="label">评分：</span>
                                <span>{{ restaurant.rating || '暂无' }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="far fa-clock"></i>
                                <span class="label">营业时间：</span>
                                <span>{{ restaurant.businessHours || '暂无' }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-phone"></i>
                                <span class="label">联系电话：</span>
                                <span>{{ restaurant.phone || '暂无' }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span class="label">详细地址：</span>
                                <span>{{ restaurant.address || '暂无' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 详情描述 -->
                    <div class="detail-section" v-if="restaurant.description">
                        <h3>详情描述</h3>
                        <p class="description">{{ restaurant.description }}</p>
                    </div>

                    <!-- 店铺图片 -->
                    <div class="detail-section" v-if="restaurant.images && restaurant.images.length > 0">
                        <h3>店铺环境</h3>
                        <div class="image-gallery">
                            <div v-for="(image, index) in restaurant.images" :key="index" class="gallery-item"
                                @click="viewImage(image)">
                                <img :src="image" :alt="`${restaurant.name}图片${index + 1}`" class="gallery-img">
                            </div>
                        </div>
                    </div>

                    <!-- 管理信息（可选显示） -->
                    <div class="detail-section admin-info" v-if="showAdminInfo">
                        <h3>管理信息</h3>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <span class="label">显示优先级：</span>
                                <span>{{ restaurant.displayPriority || 0 }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">是否推荐：</span>
                                <span>{{ restaurant.isRecommended ? '是' : '否' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="label">是否显示：</span>
                                <span>{{ restaurant.isVisible ? '是' : '否' }}</span>
                            </div>
                            <div class="detail-item" v-if="restaurant.createdAt">
                                <span class="label">创建时间：</span>
                                <span>{{ formatDate(restaurant.createdAt) }}</span>
                            </div>
                            <div class="detail-item" v-if="restaurant.updatedAt">
                                <span class="label">更新时间：</span>
                                <span>{{ formatDate(restaurant.updatedAt) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button class="action-btn primary" @click="navigateToMap">导航前往</button>
                
            </div>
        </div>
    </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
    name: 'RestaurantDetailModal',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        restaurant: {
            type: Object,
            default: () => ({})
        },
        showAdminInfo: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:visible'],
    setup(props, { emit }) {
        const closeModal = () => {
            emit('update:visible', false)
        }

        const formatDate = (date) => {
            if (!date) return ''
            return new Date(date).toLocaleString('zh-CN')
        }
        const navigateToMap = () => {
            const address = props.restaurant.address;
            if (!address) return;

            const encodedAddress = encodeURIComponent(address);
            const url = `https://www.amap.com/search?query=${encodedAddress}`;
            window.open(url, '_blank');
        };

        const makePhoneCall = () => {
            if (props.restaurant.phone) {
                window.location.href = `tel:${props.restaurant.phone}`
            }
        }

        const viewImage = (imageUrl) => {
            // 这里可以实现图片查看器功能
            console.log('查看图片:', imageUrl)
        }

        return {
            closeModal,
            formatDate,
            navigateToMap,
            makePhoneCall,
            viewImage
        }
    }
}
</script>

<style scoped>
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.modal-title {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #999;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.close-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}

.modal-body {
    padding: 1.5rem;
}

.cover-image {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
}

.cover-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.detail-section {
    margin-bottom: 2rem;
}

.detail-section h3 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e74c3c;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.detail-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f9f9f9;
    border-radius: 6px;
}

.detail-item i {
    margin-right: 0.5rem;
    color: #e74c3c;
    width: 16px;
}

.label {
    font-weight: 500;
    color: #666;
    margin-right: 0.5rem;
    min-width: 80px;
}

.description {
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.gallery-item {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

.admin-info {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    position: sticky;
    bottom: 0;
    background: white;
}

.action-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn.primary {
    background: #e74c3c;
    color: white;
}

.action-btn.primary:hover {
    background: #c0392b;
}

.action-btn.secondary {
    background: #3498db;
    color: white;
}

.action-btn.secondary:hover {
    background: #2980b9;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 10px;
    }

    .modal-content {
        max-height: 95vh;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1.3rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .image-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .modal-footer {
        padding: 1rem;
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
    }
}
</style>